<template>
  <div>
    <a-modal title="选择角色" v-model="visible" destroyOnClose :maskClosable="false" :confirm-loading="confirmLoading" @ok="handleOk">
      <a-row>
        <a-col :span="24">
          <a-form-item label="当前角色" :labelCol="{span:6}" :wrapperCol="{span:16}">
            <!-- <a-select v-model="form.activeRoleId"
                      style="width:100%;">
              <a-select-option v-for="(role,index) in this.$store.getters.roleList"
                               :key="index"
                               :value="role">{{role}}</a-select-option>
            </a-select> -->
            <ry-select :dataSource="roleList" v-model="form.activeRoleId" valueKey="id" labelKey="roleName"></ry-select>
          </a-form-item>
        </a-col>
        <!-- <a-col :span="24">
          <a-form-item style="margin-left: 50px;color: #000000d9">
            <template>
              <a-checkbox @change="onChange">设为默认角色</a-checkbox>
            </template>
            <p style="color: #00b0ab">注：登录时按照默认角色登录，个人中心可修改默认角色</p>
          </a-form-item>
        </a-col> -->
      </a-row>
    </a-modal>
  </div>
</template>
<script>

export default {
  components: {},
  data () {
    return {
      form: {
      },
      visible: false,
      confirmLoading: false,
      roleList: []
    }
  },
  created () {
    this.getRoleList()
  },
  methods: {
    open (user) {
      this.visible = true
      this.form = { ...user }
    },
    handleOk () {
      this.confirmLoading = true
      this.$get(`${this.$api.permission.login.info}?activeRoleId=${this.form.activeRoleId}`).then(res => {
        this.$router.go(0)
      })
      // this.$emit('ModalOk', this.form)
    },
    onChange (e) {
      this.$set(this.form, 'defaultRole', this.form.activeRoleId)
    },
    // 获取角色列表
    getRoleList () {
      this.roleList = this.$store.getters.roleList.map((role) => {
        return {
          id: role.id,
          roleName: role.roleName
        }
      })
    }
  }
}
</script>
<style lang='less'>
</style>
